import { useEffect } from "react";
import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import storeRedux from "@redux/index";
import Head from "next/head";
import Router from "next/router";
import "antd/dist/antd.min.css";
import "../styles/index.css";
import "../styles/globals.scss";
import "../styles/public.scss";
import Layout from "@layout/index";

function MyApp({ Component, pageProps }: AppProps) {
  const consoleStyle = "font-size: 12px; color: skyblue";
  useEffect(() => {
    // console.group('%crouter 变化开始 ---->>>', consoleStyle)
    // 路由发生变化时
    Router.events.on("routeChangeStart", (...args) => {
      // console.log('%c1.routeChangeStart->路由开始变化,参数为:' + JSON.stringify(args), consoleStyle)
    });
    // 路由结束变化时
    Router.events.on("routeChangeComplete", (...args) => {
      // console.log('%c2.routeChangeComplete->路由结束变化,参数为:' + JSON.stringify(args), consoleStyle)
    });
    // 浏览器history触发前
    Router.events.on("beforeHistoryChange", (...args) => {
      // console.log('%c3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:' + JSON.stringify(args), consoleStyle)
    });
    // 路由跳转发生错误时
    Router.events.on("routeChangeError", (...args) => {
      // console.log('%c4,routeChangeError->跳转发生错误,参数为:' + JSON.stringify(args), consoleStyle)
    });
    // 转变成hash路由模式
    Router.events.on("hashChangeStart", (...args) => {
      // console.log('%c5,hashChangeStart->hash跳转开始时执行,参数为:' + JSON.stringify(args), consoleStyle)
    });
    Router.events.on("hashChangeComplete", (...args) => {
      // console.log('%c6,hashChangeComplete->hash跳转完成时,参数为:' + JSON.stringify(args), consoleStyle)
    });
    console.groupEnd();
  }, []);

  return (
    <Provider store={storeRedux}>
      <Head>
        <title>Next App 学习</title>
        <meta name="description" content="Generated by create next app" />
        {/* 移动端响应式标记 */}
        {/* <meta name="viewport" content="initial-scale=1, width=device-width" /> */}
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
        />
        {/* <link rel="icon" href="/favicon.ico" /> */}
      </Head>
      <Layout></Layout>
      <main>
        <Component {...pageProps} />
      </main>
    </Provider>
  );
}

export default MyApp;
